<template>
	<view class="searchWrap">
		<view class="searchBox">
			<view class="inputWrap">
				<view class="iconWrap1">
					<i class="iconfont icon-fangdajing"></i>
				</view>
				<input @confirm="searchByInput" @input="getSuggest(searchWord)" class="searchInput" focus="true" v-model="searchWord"
							placeholder-style="text-align: start;" :placeholder="deWord" type="text" confirm-type="search" />
				<view class="iconWrap2" @tap="clear">
					<i v-if="searchWord" class="iconfont icon-cha"></i>
				</view>
			</view>			
		</view>
		<view class="suggest" v-if="searchWord">
			<view v-if="!searched">
				<view class="quickSearch" @tap="searchByInput(searchWord)">
					<text class="quickSearchText">{{quickSearchText}}</text>
				</view>
				<view @tap="searchByTapItem(item.keyword)" class="suggest-item" v-for="(item, index) in suggestList" :key="item.id">
					<view class="iconWrap">
						<i class="iconfont icon-fangdajing"></i>
					</view>
					<text class="mname">{{item.keyword}}</text>
				</view>
			</view>
			<view v-if="searched">
				<view class="search-list-item" @tap="openPlayPage(item.mid)" v-for="(item, index) in searchList" :key="item.id" :style="{marginBottom: index === currentSongList.length-1? '60rpx':''}">
					<view class="songInfo">
						<view class="nameWrap">
							<view class="songname" :style="{color: searchWord === item.mname ? '#5db0b8':'inherit'}">{{item.mname}}</view>
						</view>
						<view class="descWrap">
							<view class="description">
								<text :style="{color: searchWord === item.singers ? '#5db0b8':'inherit'}">{{item.singers}}</text>
								-<text :style="{color: searchWord === item.sename ? '#5db0b8':'inherit'}">{{item.sename}}</text></view>
						</view>
					</view>
					<view class="playBtn">
						<i class="iconfont icon-media-play-03"></i>
					</view>
				</view>
			</view>
		</view>
		
		<view v-else>
			<scroll-view class="searchRank" scroll-y="true">
				<view class="placeholderBox"></view>
				<view class="hotSeachTitle">热搜榜</view>
				<view class="items">
					<view class="list-item" @tap="searchByTapItem(item.mname)" v-for="(item, index) in hotResearchArr" :key="item.id" :style="{marginBottom: index === currentSongList.length-1? '50rpx':''}">
						<view :style="{color: index<=2?'#ff3a3a':''}" class="numberWrap">
							<view class="numberBadge" >{{index + 1}}</view>
						</view>
						<view class="songInfo">
							<view class="nameWrap">
								<view class="songname">{{item.mname}}</view>
								<image class="icon" :src="item.iconUrl" mode="aspectFit"></image>
							</view>
							<view class="content">{{item.content}}</view>
						</view>
						<view class="score">{{item.score}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	export default {
		data() {
			return {
				deWord: '',
				hotResearchArr: null,
				searchWord: null,
				suggestList: null,
				searched: false,
				searchList: null
			}
		},
		computed:{
			quickSearchText(){
				return `搜索"${this.searchWord}"`
			}
		},
		methods: {
			...mapMutations(['changePlayStatus', 'changeStopStatus', 'changeGlobalPlayList', 'changeCurMusicInfo', 'changeCurTapIndex']),
			getBack() {
				uni.navigateBack({
					url: '../discovery/discovery'
				})
			},
			getSuggest(searchWord){
				let that = this
				uni.request({
					url: `${that.$http.vercelUrl}/search/suggest?keywords=${searchWord}&type=mobile`,
					success: res => {
						console.log('搜索建议:', res.data.result.allMatch);
						that.suggestList = []
						res.data.result.allMatch.forEach(function(item, index){
							that.suggestList[index] = {
								id: index,
								keyword: item.keyword
							} 
						})
					},
					fail: (e) => {console.log('获取搜索建议失败',e)}
				});
			},
			searchByInput(event){
				let that = this
				let eventWord = event.detail
				if (eventWord) {
					// 判断用户是通过按下键盘上的“搜索”来搜索
					that.getSearchList(eventWord.value)
				} else {
					// 判断用户是通过点击快捷搜索xx来搜索的
					that.getSearchList(that.searchWord)
				}
			},
			searchByTapItem(songname){
				let that = this
				that.searchWord = songname
				console.log('songname',songname);
				that.getSearchList(songname)
			},
			getSearchList(searchWord){
				let that = this
				uni.request({
					url: `${that.$http.vercelUrl}/search?keywords=${searchWord}`,
					success: res => {
						let searchArr = res.data.result.songs
						console.log('searchArr', searchArr);
						that.searchList = []
						searchArr.forEach(function(item1, index){
							let singer = ''
							if (item1.artists.length > 1) {
								item1.artists.forEach(function(item2, index){
									singer += item2.name + '/'
								})
								singer = singer.substring(0, singer.length - 1)
								// console.log('走if:',JSON.stringify(singer));
							} else {
								singer = item1.artists[0].name
								// console.log('走else:',JSON.stringify(singer));
							}
							that.searchList[index] = {
								id: index,
								mid: item1.id,
								mname: item1.name,
								singers: singer,
								sename: item1.album.name
							}
						})
						that.$nextTick(function(){
							that.searched = true
						})
					},
					fail: (e) => {console.log('获取搜索信息失败',e)}
				})
			},
			clear(){
				this.searched = false
				this.searchWord = null
			},
			openPlayPage(mid){
				let musicInfo = null
				let that = this
				uni.request({
					url: `${that.$http.vercelUrl}/song/detail?ids=${mid}`,
					success: res => {
						// console.log('play.vue歌曲详情：',res)
						musicInfo = {
							mid,																																// 歌曲id(用于获取对应的播放url)
							name: res.data.songs[0].name,																				// 音乐名
							icon: 'iconfont icon-media-play-03', 																// 设置播放字体图标,以控制对应歌曲的播放按钮图标
							picurl: res.data.songs[0].al.picUrl,  															// 专辑图链接
							singer: res.data.songs[0].ar[0].name,																// 歌手名
							playUrl: `https://music.163.com/song/media/outer/url?id=${mid}.mp3`	// 播放链接
						}
						let list = []
						list.push(musicInfo)
						that.changeCurMusicInfo(musicInfo)
						that.changeGlobalPlayList(list)
						that.changeCurTapIndex(0)
						that.changePlayStatus()
						that.$player.title = musicInfo.name
						that.$player.singer = musicInfo.singer
						that.$player.coverImgUrl = musicInfo.picurl
						that.$player.src = musicInfo.playUrl
						uni.navigateTo({
							url: `../play/play?mid=${mid}`
						})
					},
					fail: (e) => { console.log('获取歌曲详情失败:', e)}
				})
				
			}
		},
		onLoad(opt) {
			let that = this
			// 从search组件接受默认搜索词并复制给搜索框
			this.deWord = opt.defaultWord
			
			// 获取热搜榜信息
			uni.request({
				url: `${that.$http.vercelUrl}/search/hot/detail`,
				success: res => {
					// console.log('热搜信息：',res);
					let researchArray = res.data.data
					that.hotResearchArr = []
					researchArray.forEach(function(item, index){
						that.hotResearchArr[index] = {
							id: index,
							mname: item.searchWord,
							content: item.content,
							iconType: item.iconType,
							iconUrl: item.iconUrl,
							score: item.score
						}
					})
				},
				fail: (e) => {
					console.log('获取热搜列表失败', e);
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.searchWrap {
	height: 100%;
	.searchBox {
		height: 8%;
		width: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		.inputWrap {
			width: 90%;
			height: 58%;
			margin: 0px auto;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			background-color: rgba(221, 221, 221, .32);
			border-radius: 20px;
			padding-left: 25rpx;
			.iconWrap1 {
				margin-right: 10px;
				.iconfont {
					font-size: 42rpx;
					color: #8e8e8e;
				}
			}
			.searchInput {
				width: 78%;
			}
			.iconWrap2 {
				position: absolute;
				top: 36rpx;
				right: 52rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				z-index: 12;
				.iconfont {
					font-size: 30rpx;
					color: #8e8e8e;
					text-align: center;
				}
			}
		}
	}
	.suggest {
		margin-top: 125rpx;
		.quickSearch {
			margin: 10rpx 40rpx;
			.quickSearchText {
				color: #5a7cab;
			}
		}
		.suggest-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 45rpx 46rpx;
			.iconWrap {
				color: #8e8e8e;
				margin-right: 16rpx;
				.iconfont {
					font-size: 44rpx;
				}
			}
			.mname {
				color: #5b5b5b;
			}
		}
		.search-list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 45rpx 46rpx;
			.songInfo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				.nameWrap {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					.songname {}
				}
				.descWrap {
					font-size: 25rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.playBtn {
				.iconfont {
					font-size: 55rpx;
					color: #c5c5c5;
				}
			}
		}
	}
	.searchRank {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		.placeholderBox {
			height: 115.8rpx;
			width: 100%;
		}
		.hotSeachTitle {
			border-bottom: 1px solid #f0efef;
			width: 100%;
			height: 2rem;
			left: 2rem;
			padding-left: 25rpx;
			font-weight: 500;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.items {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top: 5px;
			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 44rpx;
				.numberWrap {
					width: 15%;
					text-align: center;
					color: #c1c1c1;
				}
				.songInfo {
					width: 65%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					.nameWrap {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 3rpx;
						.songname {
							font-size: 35rpx;
							font-weight: 500;
							margin-right: 7rpx;
						}
						.icon {
							width: 50rpx;
							height: 30rpx;
						}
					}
					.content {
						font-size: 20rpx;
						color: #bebebe;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.score {
					width: 20%;
					font-size: 20rpx;
					color: #AAA;
					text-align: end;
					margin-right: 40rpx;
				}
			}
		}
	}
}

</style>
